<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table Demo1</title>
    <style>
      #customers {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        width: 100%;
        border-collapse: collapse;
      }
      /*
      #customers td,
      #customers th {
        font-size: 1em;
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
   
      #customers th {
        font-size: 1.1em;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 4px;
        background-color: #a7c942;
        color: #ffffff;
      }
      #customers tr.alt td {
        color: #000000;
        background-color: #eaf2d3;
        border: 2px snow black;
      } */
      #tableDiv1 {
        position: relative;
        left: 300px;
        width: 800px;
      }

      table,
      caption,
      th,
      td {
        border: 1px solid blue;
      }
      #one {
        color: red;
      }
      #two {
        color: yellow;
      }
      /* #one tr td:hover {
        color: yellow;
      }
      #two tr td:hover {
        color: red;
      } */
    </style>

    <!-- <style type="text/css">
      th {
        font-size: 18px;
        text-align: center;
        padding-top: 3px;
        background-color: #bdb76b;
        color: #006400;
      }
      caption {
        font-size: 35px;
        color: Black;
      }
      td {
        font-size: 15px;
        border: 1px solid #008b8b;
        padding: 3px;
        background-color: Khaki;
      }
      tr.alt td {
        color: #f0e68c;
        background-color: #b22222;
      }
    </style> -->
  </head>
  <body style="background-color: rgb(163, 157, 157)">
    <div id="tableDiv1">
      <!-- 不建议再使用border 建议使用css来控制样式 -->
      <!-- <table id="customers" border="1">  -->
      <table id="customers">
        <caption>
          table demo
        </caption>

        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody id="two">
          <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
          </tr>
          <tr class="alt">
            <td>李四</td>
            <td>19</td>
            <td>女</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>20</td>
            <td>女</td>
          </tr>
          <tr class="alt">
            <td>马六</td>
            <td>17</td>
            <td>男</td>
          </tr>
        </tbody>

        <tbody id="one">
          <tr>
            <td>周七</td>
            <td>18</td>
            <td>女</td>
          </tr>
          <tr class="alt">
            <td>吴八</td>
            <td>23</td>
            <td>男</td>
          </tr>
          <tr>
            <td>郑九</td>
            <td>21</td>
            <td>女</td>
          </tr>
          <tr class="alt">
            <td>王十</td>
            <td>22</td>
            <td>男</td>
          </tr>
          <tr>
            <td>赵十一</td>
            <td>13</td>
            <td>女</td>
          </tr>
          <tr class="alt">
            <td>钱十二</td>
            <td>15</td>
            <td>男</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
